<template>
  <div>
    <div class="detail">
      <p class="flex-b">发布名称：{{ state.detail.fabumingcheng }}</p>
      <p>类型：{{ state.detail.leixing }}</p>
      <p>地区：{{ state.detail.diqu }}</p>
      <p>发布公司：{{ state.detail.gongsi }}</p>
      <p>招标项目：</p>
      <el-table
        ref="multipleTableRef"
        class="mt30"
        border
        :data="state.projectList"
        style="width: calc(100% - 20px)"
      >
        <el-table-column property="xmNo" label="序号" align="center" />
        <el-table-column
          property="xiangmumingcheng"
          label="项目名称"
          align="center"
        />
        <el-table-column
          property="chengshi"
          label="城市（省市区）"
          align="center"
        />
        <el-table-column
          property="xiangmuleixing"
          label="类型"
          align="center"
        />
        <el-table-column
          property="xiangmudizhi"
          label="项目地址"
          align="center"
        />
        <el-table-column property="zhuangtai" label="项目状态" align="center" />
        <el-table-column
          property="yunyingshang"
          label="项目运营商"
          align="center"
        />
        <el-table-column fixed="right" label="操作" width="80" align="center">
          <template #default="scope">
            <el-button
              style="min-width: auto"
              link
              type="primary"
              size="small"
              @click.prevent="onOperation(scope.row, 'detail')"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <p>招标内容：</p>
      <div class="mt20" v-html="state.detail.zhaobiaoneirong"></div>
      <p>状态：{{ state.detail?.shangjia?.code == 1 ? "已上架" : "已下架" }}</p>
      <div class="flex-c mt40">
        <el-button type="primary" @click="onOperation({}, 'edit')"
          >编辑</el-button
        >
        <el-button
          type="primary"
          style="margin-left: 50px"
          @click="$router.go(-1)"
          >返回</el-button
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GetDeployDetail } from "@/api/deploy";
const route = useRoute();
const router = useRouter();
const state = reactive({
  detail: {},
  // 项目列表
  projectList: [],
});
const GetList = () => {
  GetDeployDetail({ id: route.query.id }).then((res) => {
    if (res.code === 4201) {
      state.detail = res.data;
      state.projectList.push(state.detail.xiangmu);
    }
  });
};
const onOperation = (params, operation) => {
  if (operation === "edit") {
    router.push({
      path: `/xiangmuxinxifabu/info`,
      query: {
        id: state.detail.id,
        type: operation,
      },
    });
  }
  if (operation === "detail") {
    router.push({
      path: `/xiangmu/detail`,
      query: {
        id: params.id,
      },
    });
  }
};
GetList();
</script>
<style lang="scss" scoped>
.detail {
  padding: 1px 30px 30px 30px;
  font-size: 16px;
  color: #000;
  p {
    margin-top: 30px;
  }
}
</style>
<style>
.el-table__header th {
  background-color: #f2f9fc !important;
}
</style>
